<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>我的抄表记录</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
			.item{
				display: flex;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar color="secondary" style="width: 100%;position: fixed;top: 0;">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				我的抄表记录
			</mu-appbar>
			<mu-tabs  style="width: 100%;position: fixed;top: 56px;" :value.sync="tabindex" color="secondary" inverse  indicator-color="secondary" full-width>
				<mu-tab @click="refresh">待审核</mu-tab>
				<mu-tab @click="refresh">已通过</mu-tab>
				<mu-tab @click="refresh">未通过</mu-tab>
			</mu-tabs>
			<mu-container ref="container" style="padding-top: 100px;">
				<mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
					<mu-list>
						<template v-for="(item,index) in list">
							<div style="padding: 15px;">
								<div style="display: flex;">
									<div class="label">气表标号：</div>
									<div style="padding-left: 10px;word-break:break-all">
										{{item.no}}
									</div>
								</div>
								<div class="item">
									<div class="label">抄表读值：</div>
									<div style="padding-left: 10px;">
										{{item.meterValue}}
										<span style="color: red;">m³</span>
									</div>
								</div>
								<div class="item">
									<div class="label">抄表时间：</div>
									<div style="padding-left: 10px;">
										{{item.applyDate}}
                                                                                                                                                                                                         									</div>
								</div>
								<div class="item">
									<div class="label">状态：</div>
									<div style="padding-left: 10px;">
										{{item.state}}
									</div>
								</div>
								<div class="item">
									<div class="label">期次：</div>
									<div style="padding-left: 10px;">
										{{item.period}}
									</div>
								</div>
								<div class="item" v-if="tabindex==2">
									<div class="label">未通过原因：</div>
									<div style="padding-left: 10px;">
										{{item.reson}}
									</div>
								</div>
							</div>
							<mu-divider />
						</template>
					</mu-list>
				</mu-load-more>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					list: [],
					limit: 20,
					tabindex: 0,
					refreshing: false,
					loading: false,
				}
			},
			methods: {
				refresh() {
					this.refreshing = true;
					this.$refs.container.scrollTop = 0;
					if(this.tabindex==0){
						var state = '待审核';
					}
					if(this.tabindex==1){
						var state = '已通过';
					}
					if(this.tabindex==2){
						var state = '未通过';
					}
					var params = {
						start: 1,
						limit: this.limit,
						state:state
					}
					util.ajax("/api/method/getRecordMeterRecordByUserId", params, data => {
						this.refreshing = false;
						this.list = data.object.list;
					})
				},
				load() {
					this.loading = true;
					if(this.tabindex==0){
						var state = '待审核';
					}
					if(this.tabindex==1){
						var state = '已通过';
					}
					if(this.tabindex==2){
						var state = '未通过';
					}
					var params = {
						start: this.list.length,
						limit: this.limit,
						state:state
					}
					util.ajax("/api/method/getRecordMeterRecordByUserId", params, data => {
						this.loading = false;
						this.list = this.list.concat(data.object.list);
					})
				}
			}
		})
		document.addEventListener('plusready', function() {
			vm.refresh();
		});
	</script>
</html>
